<template>
  <div class="studentEdit">
    <el-form :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
      <el-form-item label="用户名:" prop="userName">
        <el-input v-model="form.userName" />
      </el-form-item>

      <el-form-item label="密码:" prop="password">
        <el-input v-model="form.password" type="password" />
      </el-form-item>

      <el-form-item label="真实姓名:" prop="realName">
        <el-input v-model="form.realName" />
      </el-form-item>

      <el-form-item label="年龄:">
        <el-input v-model="form.age" type="number" />
      </el-form-item>

      <el-form-item label="性别:">
        <el-select v-model="form.sex" placeholder="性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="出生日期:">
        <el-date-picker v-model="form.birthDay" type="date" placeholder="选择日期" size="default"
          value-format="YYYY-MM-DD" />
      </el-form-item>

      <el-form-item label="手机:">
        <el-input v-model="form.phone" />
      </el-form-item>

      <el-form-item label="年级:" prop="userLevel">
        <el-select v-model="form.userLevel" placeholder="年级">
          <el-option label="一年级" :value="1" />
          <el-option label="二年级" :value="2" />
          <el-option label="三年级" :value="3" />
          <el-option label="四年级" :value="4" />
          <el-option label="五年级" :value="5" />
          <el-option label="六年级" :value="6" />
          <el-option label="初一" :value="7" />
          <el-option label="初二" :value="8" />
          <el-option label="初三" :value="9" />
          <el-option label="高一" :value="10" />
          <el-option label="高二" :value="11" />
          <el-option label="高三" :value="12" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态:" prop="status">
        <el-select v-model="form.status" placeholder="状态">
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="   ">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import UserAPI from '@/api/system/user.api'

const router = useRouter()
const route = useRoute()

interface ParamsType {
  id: string | null
  userName: string
  password: string, //密码
  realName: string, //真实姓名
  role: number, //角色
  status: number, //状态
  age: string, //年龄
  sex: string, //性别
  birthDay: string | null, //生日
  phone: string | null, //手机号
  userLevel: number //年级
}

let form = reactive<ParamsType>({
  id: null,
  userName: '',
  password: '',
  realName: '',
  role: 1,
  age: '',
  sex: '',
  birthDay: "",
  phone: "",
  userLevel: 1,
  status: 1
});
import type { FormRules } from 'element-plus'
const rules = reactive<FormRules<ParamsType>>({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  userLevel: [
    { required: true, message: '请选择年级', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})


//信息初始化
function getList() {
  const queryId = route.query.id;
  form.id = Array.isArray(queryId) ? queryId[0] : queryId;

  if (form.id) {
    UserAPI.selectUser(form.id).then(res => {
      console.log(res);

      form.userName = res.userName
      form.realName = res.realName
      form.age = res.age
      form.sex = res.sex
      form.birthDay = res.birthDay
      form.userLevel = res.userLevel
      form.phone = res.phone

    })
  }
}

const onSubmit = () => {
  // console.log('submit!')
  UserAPI.editUser(form).then(() => {
    // console.log(res);

    ElMessage({
      message: '成功',
      type: 'success',
    })
    router.push('/user/student')
  })
}

const resetForm = () => {
  form.userName = '';
  form.password = '';
  form.realName = '';
  form.age = '';
  form.sex = '';
  form.birthDay = "";
  form.phone = ""
  form.userLevel = 1;
  form.status = 1;
};

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.studentEdit {
  padding: 20px 40px;
}
</style>
